import MonacoEditor, { EditorProps, OnMount } from "@monaco-editor/react";

interface CssEditorProps {
    value: string;
    onChange?: EditorProps['onChange']; // 当自定义样式改变时，要将样式更新到store对应的组件中
    options?: EditorProps['options'];
}

export const CssEditor = ({ value, onChange, options }: CssEditorProps) => {

    const handleEditorMount: OnMount = (editor, monaco) => {
        // 支持 cmd + J 快捷键来格式化
        editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyJ, ()=>{
            editor.getAction("editor.action.formatDocument")?.run();
        })
    }

    return (
        <MonacoEditor 
            height={'100%'}
            path="component.css"
            language="css"
            value={value}
            options={
                {
                    fontSize: 14,
                    scrollBeyondLastLine: false,
                    minimap: {
                        enabled: false
                    },
                    scrollbar: {
                        verticalScrollbarSize: 6,
                        horizontalScrollbarSize: 6
                    },
                    ...options
                }
            } 
            onMount={ handleEditorMount }
            onChange={ onChange } />
    )
}